<script setup>
import { onMounted, ref } from 'vue'
import { mySellListApi, agreeRefundOrderApi } from '@/api/order'
import { getUserDetailsApi } from '@/api/user'
import parseTime from '@/utils/time'
import parseStatus from '@/utils/dictionary'
import { Search } from '@element-plus/icons-vue'

// 骨架屏加载动画
const loading = ref(true)

// 筛选条件
const orderStatus = ref('')
const orderList = ref([])
const setOrderList = async () => {
  const res = await mySellListApi(orderStatus.value)
  orderList.value = res.data
  loading.value = false
}

// 查看客户基本信息
const userDetails = ref({
  id: '',
  avatar: '',
  phone: '',
  addr: ''
})
const userInfoDialog = ref(false)
const getUserDetails = async (uid) => {
  userInfoDialog.value = true
  const res = await getUserDetailsApi(uid)
  userDetails.value = res.data
}

// 同意退款
const agreeRefundOrder = async (id) => {
  await agreeRefundOrderApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('操作成功')
  // 重载数据
  setOrderList()
}

onMounted(() => setOrderList())
</script>
<template>
  <div class="order-container">
    <div class="main-container">
      <div>
        <el-tabs v-model="orderStatus">
          <el-tab-pane label="全部" name="" />
          <el-tab-pane label="待付款" name="40001" />
          <el-tab-pane label="进行中" name="40002" />
          <el-tab-pane label="退款中" name="40002" />
          <el-tab-pane label="已完成" name="40004" />
        </el-tabs>
      </div>

      <div class="holder-container" v-if="orderList.length === 0">
        <el-skeleton v-if="loading" :rows="8" animated />
        <el-empty v-else description="暂无订单数据" />
      </div>
      <div v-else>
        <!-- 订单列表 -->
        <el-table :data="orderList" style="width: 100%">
          <el-table-column label="产品" align="center" width="200">
            <template #default="scope">
              <CarItemPublish
                disable
                size="mini-more"
                :car="scope.row.vehiclePublish"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="订单号"
            align="center"
            prop="id"
            width="150"
          />
          <el-table-column label="订金" align="center" width="120">
            <template #default="{ row }">
              <el-text type="danger">{{ row.orderPrice }}</el-text>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" align="center" width="170">
            <template #default="{ row }">
              <el-text type="info">{{ parseTime(row.createTime) }}</el-text>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="170">
            <template #default="{ row }">
              <el-text>{{ parseStatus(400, row.orderStatus) }}</el-text>
              <el-row justify="center">
                <div v-if="row.orderStatus === 40004" style="margin-top: 5px">
                  <el-button
                    type="warning"
                    size="small"
                    round
                    @click="agreeRefundOrder(row.id)"
                  >
                    同意退款
                  </el-button>
                </div>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-row justify="center">
                <el-button
                  type="primary"
                  size="small"
                  :icon="Search"
                  round
                  @click="getUserDetails(row.uid)"
                >
                  联系用户
                </el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 用户信息对话框 -->
      <el-dialog v-model="userInfoDialog" title="用户信息" width="350">
        <div style="margin: 15px 0 0 15px">
          <el-row>
            <el-col :span="8">
              <el-avatar :size="90" :src="userDetails.avatar" />
            </el-col>
            <el-col :span="16">
              <el-descriptions :column="1">
                <el-descriptions-item label="昵称">{{
                  userDetails.nickname
                }}</el-descriptions-item>
                <el-descriptions-item label="电话">{{
                  userDetails.phone
                }}</el-descriptions-item>
                <el-descriptions-item label="微信">{{
                  userDetails.wechat
                }}</el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </div>
        <template #footer>
          <el-button type="primary" @click="userInfoDialog = false"
            >OK</el-button
          >
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-desc {
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
  background-color: #fff;
}
.order-container {
  padding: 10px 20px;
  background-color: #fff;
  .pagination-container {
    display: flex;
    justify-content: center;
  }

  .main-container {
    min-height: 500px;

    .holder-container {
      min-height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
